<template>
  <el-menu :default-active="this.$store.getters.sideBar.defaultActive" :router="true" class="el-menu-vertical-demo"
    @open="handleOpen" @close="handleClose" :collapse="this.$store.getters.sideBar.isCollapse" background-color="#304156"
    text-color="#fff" active-text-color="#409EFF" style="height: 0px;" @select="handleSelect">
    <el-menu-item @click="clickItem(item)" v-if="!item.childrens" :key="item.title" v-for="item in items" :index="item.index">
      <i :class="item.icon"></i>
      <span slot="title">{{item.title}}</span>
    </el-menu-item>
    <el-submenu v-else :index="item.index">
      <template slot="title">
        <i :class="item.icon"></i>
        <span slot="title">{{item.title}}</span>
      </template>
      <el-menu-item :key="child.title" v-for="child in item.childrens" :index="child.index">{{child.title}}</el-menu-item>
    </el-submenu>
    <!--    <el-menu-item index="/personalCenter/personInfo">
      <i class="el-icon-tickets"></i>
      <span slot="title">店铺概览</span>
    </el-menu-item>
    <el-menu-item index="/personalCenter/sellerManager">
      <i class="el-icon-menu"></i>
      <span slot="title">店铺管理</span>
    </el-menu-item>
    <el-menu-item index="/personalCenter/productsManager">
      <i class="el-icon-setting"></i>
      <span slot="title">商品管理</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">我的订单</span>
    </el-menu-item>
    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-data-analysis"></i>
        <span slot="title">图表</span>
      </template>
      <el-menu-item index="5-1">销售</el-menu-item>
      <el-menu-item index="5-2">访问</el-menu-item>
    </el-submenu> -->
  </el-menu>
</template>
<script>
  export default {
    name: 'sideBar',
    data() {
      return {
        defaultActive: '',
        items: []
      };
    },
    created() {
      this.items = this.$store.getters.sideBar.items
    },
    methods: {
      clickItem(item) {
        this.$nextTick(() => {
          this.$store.commit('ADD_TAG', item)
        })

      },
      handleSelect(index, indexPath) {

        this.$store.commit('CHENGE_ACTIVE_SIDEBAR', index)
        // this.$store.commit('CHENGE_ACTIVE', index)
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
</style>
